<template>
  <div id="personnel_s">
    <!--header-->
    <x-header :left-options="{showBack: false}">排班安排</x-header>

    <div style="width: 100%;overflow-x:auto;-webkit-overflow-scrolling:touch;">
      <tab v-model="tabValue" style="width:500px;" :line-width="0">
        <tab-item>全部</tab-item>
        <tab-item v-for="item of tabList.slice(0, -1)">{{item.display_name}}</tab-item>
      </tab>
    </div>

    <div class="park-table" style="overflow: hidden">
      <!--scroller-->
      <scroller lock-x height="-145px" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom">
        <div>
          <x-table :content-bordered="false" :cell-bordered="false">
            <thead>
            <tr>
              <th>姓名</th>
              <th>排班</th>
              <th>电话</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in resultList" @click.native="phoneCall(item.phone)">
              <td>{{item.name}}</td>
              <td>{{item.time}}</td>
              <td>
                <x-button mini @click.native="phoneCall(item.phone)">{{item.phone}}</x-button>
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <!--load-more-->
                <load-more v-show="loadMoreShow" tip="使劲加载中……"></load-more>
              </td>
            </tr>
            </tbody>
          </x-table>
        </div>

      </scroller>
    </div>
  </div>
</template>

<script>
  import {
    XHeader,
    Tab,
    TabItem,
    Sticky,
    Scroller,
    LoadMore,
    Panel,
    Group,
    XButton,
    XTable
  } from 'vux'

  export default {
    components: {
      XHeader,
      Tab,
      TabItem,
      Sticky,
      Scroller,
      LoadMore,
      Panel,
      Group,
      XButton,
      XTable
    },
    data() {
      return {
        tabValue: 0,
        searchName: null,
        tabList: [],
        loadMoreShow: true,
        resultList: [],
        allList: [],
        roleName: null,
        page: 1,
        onFetching: false,
        popUpShow: false,
        roleCheckBox: [],
        role: {
          name: '',
          phone: '',
          position: ''
        },
        lock: false,
        roleList: []
      }
    },
    mounted() {
      this.$http.get('/api/user/roles').then((r) => {
        this.tabList = r.data.data
      })
      this.loadList()
    },
    methods: {
      loadList() {
        this.$http.get('/api/ondutys', {
          params: {
            page: this.page,
            limit: 10000,
            search: this.searchName || null,
            role_name: this.roleName || null
          }
        }).then((r) => {
          if (r.data.page.total <= r.data.page.limit) {
            this.loadMoreShow = false
            this.onFetching = true
          }
          let objTemp = {}
          r.data.data.forEach((item) => {
            objTemp = {}
            objTemp.name = item.user.name
            objTemp.phone = item.user.phone
            objTemp.time = `${item.start_time.substr(0, 5)}-${item.end_time.substr(0, 5)}`
            this.resultList.push(objTemp)
            let roleTemp = {}
            roleTemp.roleArray = []
            item.roles.forEach((role) => {
              roleTemp.name = item.user.name
              roleTemp.phone = item.user.phone
              roleTemp.time = `${item.start_time.substr(0, 5)}-${item.end_time.substr(0, 5)}`
              roleTemp.roleArray.push(role.display_name)
              this.roleList.push(roleTemp)
            })
          })
          this.allList = this.allList.concat(r.data.data)
        })
      },
      onScrollBottom() {
        if (!this.onFetching) {
          this.onFetching = true
          this.page++
          // 获取人员列表
          this.$http.get('/api/ondutys', {
            params: {
              page: this.page,
              limit: 10000,
              search: this.searchName || null,
              role_name: this.roleName || null
            }
          }).then((r) => {
            if (r.data.page.page > r.data.page.count) {
              this.loadMoreShow = false
            } else {
              let objTemp = {}
              r.data.data.forEach((item) => {
                objTemp = {}
                objTemp.name = item.user.name
                objTemp.phone = item.user.phone
                objTemp.time = `${item.start_time.substr(0, 5)}-${item.end_time.substr(0, 5)}`
                this.resultList.push(objTemp)
              })
              this.allList = this.allList.concat(r.data.data)
              this.onFetching = false
            }
          })
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset()
          })
        }
      },
      phoneCall(phoneNum) {
        window.location.href = 'tel:' + phoneNum
      }
    },
    watch: {
      tabValue() {
        this.$vux.loading.show({
          text: 'loading'
        })
        let roleNameList = []

        this.tabList.forEach((item) => {
          roleNameList.push(item.display_name)
        })

        this.roleName = roleNameList[this.tabValue - 1]
        this.resultList = []
        this.roleList.forEach((item) => {
          item.roleArray.forEach((roleItem) => {
            if (this.roleName === roleItem) {
              this.resultList.push(item)
            }
          })
        })
        if (!this.roleName) {
          this.loadList()
        }
        this.$nextTick(() => {
          this.$vux.loading.hide()
        })
      },
      searchName() {
        this.page = 1
        this.resultList = []
        this.allList = []
        this.loadList()
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/theme.css';
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/center.less';

  .vux-slider .vux-swiper-item {
    background-color: #fff;
  }

  .tab-swiper {
    background-color: #fff;
  }

  .hp-search-input {
    display: block;
    margin: 0 auto;
    width: 80%;
    text-align: left;
    outline: none;
    height: 2em;
    padding-left: 10%;
  }

  .hp-search {
    position: relative;
  }

  .hp-search-icon {
    position: absolute;
    top: 2px;
    left: 5%;
    fill: #9c9faa;
  }

  .role-item {
    border: 1px solid #ececec;
    padding: 5px 15px;
    background: #fff;
  }

  .role-item-selected {
    border: 1px solid #0084ff;
  }

  .box {
    padding: 10px 15px;
  }

  #personnel_s {
    height: 100%;
    overflow: hidden;
  }

  .park-table {
    width: 90%;
    margin: 4% auto;
    background: #fff;
  }
</style>
